<template>
	<layout-base>
		<div class="overview">
			<div>
				<div class="bg-danger">
					<h4>日访问量<i class="iconfont">&#xe6f4;</i></h4>
					<b>1521</b>
					<div class="other">较昨日增长30%</div>
					<img src="../assets/img/dashboard/circle.svg" />
				</div>
			</div>
			<div>
				<div class="bg-info">
					<h4>在线学习人数<i class="iconfont">&#xe70d;</i></h4>
					<b>32422</b>
					<div class="other">较昨日减少20%</div>
					<img src="../assets/img/dashboard/circle.svg" />
				</div>
			</div>
			<div>
				<div class="bg-success">
					<h4>今日问答人数<i class="iconfont">&#xe728;</i></h4>
					<b>3221</b>
					<div class="other">较昨日增长30%</div>
					<img src="../assets/img/dashboard/circle.svg" />
				</div>
			</div>
		</div>
		<pannel class="article-wrap" title="最近提问">
			<z-table>
				<thead>
					<tr>
						<th width="25%">课程</th>
						<th width="40%">问题</th>
						<th>提问者</th>
						<th>提问时间</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(v,i) in questions" :key="i">
						<td><div class="line-1">{{v.name}}</div></td>
						<td><div class="line-1">{{v.question}}</div></td>
						<td><div class="flex ai-center"><avatar class="avatar" :src="v.askerAvatar" :name="v.asker" sm></avatar><div class="line-1">{{v.asker}}</div></div></td>
						<td>{{v.createTime}}</td>
						<td><span :class="['status', v.resolved?'bg-success':'bg-danger']">{{v.resolved?'已解决':'待回答'}}</span></td>
					</tr>
				</tbody>
			</z-table>
		</pannel>
	</layout-base>
</template>

<script>
	export default{
		data(){
			return{
				questions:[
					{
						name:'晓月君亲测，史上最强降温法',
						question:'课程怎么样？',
						askerAvatar:'',
						asker:'路人甲',
						createTime:'3小时前',
						resolved:false,
					},{
						name:'晓月君亲测，史上最强降温法',
						question:'课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？课程怎么样？',
						askerAvatar:'',
						asker:'路人甲',
						createTime:'3小时前',
						resolved:false,
					},{
						name:'晓月君亲测，史上最强降温法',
						question:'课程怎么样？',
						askerAvatar:'',
						asker:'路人甲',
						createTime:'3小时前',
						resolved:false,
					},{
						name:'晓月君亲测，史上最强降温法',
						question:'课程怎么样？',
						askerAvatar:'',
						asker:'路人甲',
						createTime:'3小时前',
						resolved:false,
					},{
						name:'晓月君亲测，史上最强降温法',
						question:'课程怎么样？',
						askerAvatar:'',
						asker:'路人甲',
						createTime:'3小时前',
						resolved:true,
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.overview{
		display: flex;
		margin: -20px;
		&>div{
			padding: 20px;
			flex: 1;
			&>div{
				border-radius: 5px;
				padding: 40px;
				position: relative;
			}
		}
		h4{
			font-weight: normal;
			display: flex;
			justify-content: space-between;
			i{
				font-size: 2em;
			}
		}
		b{
			display: block;
			margin: 0 0 20px;
			font-size: 2em;
		}
		img{
			position: absolute;
			height: 100%;
			right: 0;
			top: 0;
		}
	}
	.article-wrap{
		.avatar{
			margin-right: 5px;
		}
	}
</style>
